import React, { Component } from 'react'
import { connect } from 'dva';

import { Form, DatePicker } from 'antd';
import moment from 'moment';
import { SearchRow, SearchCol } from '@/styled/form';
import { DropDownSelectObj } from '@/components/DropDownSelect/index';

import { DICT } from '../enum'

import { dealElement } from '@/utils/util';
import { UmiComponentProps, SearchComponentProps } from '@/common/type';

const { RangePicker } = DatePicker;

interface P {
  dict?: any;
  cond?: {
    ownerId: string
  };
}

type Props = P & UmiComponentProps & SearchComponentProps;

const FormItem = Form.Item;

@connect(({ analyse_charge }) => ({
  dict: analyse_charge.dict,
  cond: analyse_charge.recordCond || {}
}))
class Search extends Component<Props, any> {
  formRef: any;

  state = {
    show: false,
    isChecked: null
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({ type: 'analyse_charge/queryDict', payload: { keyList: DICT } })
  }

  search = (e) => {
    e.preventDefault()
    const { form, cond } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'analyse_charge/updateRecordCond',
          payload: values
        })
      }
    });
  }

  handleChange = (type, value) => {
    const { cond = {}, dispatch } = this.props;
    cond[type] = value;

    dispatch({
      type: 'analyse_charge/updateRecordCond',
      payload: cond
    })
  }

  handleChangeTime = (value) => {
    const { cond = {}, dispatch } = this.props;
    cond['beginTime'] = Array.isArray(value) && value[0] ? moment(value[0]).format("YYYY-MM-DD HH:mm:ss") : null;
    cond['endTime'] = Array.isArray(value) && value[1] ? moment(value[1]).format("YYYY-MM-DD HH:mm:ss") : null;

    dispatch({
      type: 'analyse_charge/updateRecordCond',
      payload: dealElement(cond)
    })
  }

  render() {
    const { dict = {}, form } = this.props;

    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const timeItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };

    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={1} span={16}>
            <FormItem
              label="断电时间"
              {...timeItemLayout}
            >
              {getFieldDecorator('createTime')(
                <RangePicker
                  style={{ width: '100%' }}
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder={['开始时间', '结束时间']}
                  onChange={(v) => this.handleChangeTime(v)}
                />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={8}>
            <FormItem
              label="断电原因"
              {...formItemLayout}
            >
              {getFieldDecorator('reason')(
                DropDownSelectObj({ dict, type: 'device.charging.state', onChange: (v) => this.handleChange('reason', +v) })
              )}
            </FormItem>
          </SearchCol>
          {/* <SearchCol span={6}></SearchCol> */}
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
